<template>
  <div class="sms-setting">
    <div class="sms-left">
      <el-form label-width="80px">
        <el-form-item label="短信余额">
          <span class="msg-balance">{{data.sms_balance || '0'}} 条</span>
        </el-form-item>
        <el-form-item label="短信签名">
          <el-input class="sms-input" placeholder="请输入短信签名" v-model="data.sms_sign"></el-input>
        </el-form-item>
        <el-form-item label="是否开启">
          <el-switch
          v-model="is_open_sms_bool"
          on-text=""
          on-color="#20a0ff"
          off-text=""></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="$saveSmsInfo">保存</el-button>
        </el-form-item>
      </el-form>
      <div class="msg-desc">
        <h4>说明：</h4>
        <p>1.目前在营销顾问收到新名单时，系统会发送短信提醒顾问；</p>
        <p>2.目前仅支持使用深圳麦圈互动技术有限公司短信网关，收费标准 ：8分/条，</br>系统默认赠送50条短信额度，额度用完后需充值才能继续使用短信服务；</p>
        <p>3.可扫下面的二维码充值，扫码付款后可联系公众号的客服；</p>
        <h4>扫描公众号商品二维码支付</h4>
        <img src="http://oodoa7x5e.bkt.clouddn.com/msg-pay-qrcode.png" />
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  .sms-setting {
    overflow: hidden;
  }

  .msg-balance {
    margin-right: 94px;
  }

  .sms-input {
    width: 200px;
  }

  .sms-left {
    float: left;
  }

  .msg-desc,.sms-left {
    h4 {
      font-size: 12px;
      font-weight: bold;
    }

    p {
      font-size: 12px;
    }

    img {
      width: 79px;
      height: 77px;
    }
  }

  .balance-input {
    width: 200px;
  }

  .msg-desc {
    padding-left: 12px;
  }
  .qr-part {
    margin-left: 50px;
  }
</style>
<script>
  import { Form, FormItem, Switch, Input, Button, Table, TableColumn } from 'element-ui'
  import { mapActions } from 'vuex'
  import N from '../lib/notification'

  export default {
    components: {
      [Form.name]: Form,
      [FormItem.name]: FormItem,
      [Switch.name]: Switch,
      [Input.name]: Input,
      [Button.name]: Button,
      [Table.name]: Table,
      [TableColumn.name]: TableColumn
    },
    methods: {
      $saveSmsInfo () {
        this.saveSmsInfo(this.data).then((response) => {
          if (response.data.errcode === 0) {
            N.notify('success', '保存成功！')
          } else {
            N.notify('error', '后台出了点小问题喔！请联系管理员!')
          }
        }).catch((error) => {
          console.log(error)
          N.notify('error', '后台出了点小问题喔！请联系管理员!')
        })
      },
      ...mapActions({
        'getSmsInfo': 'getSmsInfo',
        'saveSmsInfo': 'saveSmsInfo'
      })
    },
    watch: {
      is_open_sms_bool (value) {
        this.data.is_open_sms = value === true ? 1 : 0
      }
    },
    mounted () {
      this.getSmsInfo().then((response) => {
        if (response.data.errcode === 0) {
          const data = response.data.results
          this.data = Object.assign({}, this.data, data)
          this.is_open_sms_bool = data.is_open_sms === 1
          console.log(this.is_open_sms_bool, data.is_open_sms, 'this.is_open_sms_bool')
        }
      }).catch(() => {
      })
    },
    data () {
      return {
        data: {
          is_open_sms: 0,
          sms_sign: '',
          sms_balance: ''
        },
        is_open_sms_bool: false
      }
    }
  }
</script>
